<template>
  <div class="content-box">
    <mt-button class="resize" size="normal" type="primary" v-show="picPath" @click="resize">重新识别</mt-button>
    <div class="addPic"  v-show="!picPath">
      <img class="tips" src="../../assets/images/tips.png">
    <div class="imgClass">
      <input type="file" id="id" ref="input" name="image" @change="shangc($event)"
        accept="image/png,image/jpeg,image/jpg">
      <span>+添加图片</span>
    </div>
      <div style="color:#999;margin-top:20px;">（只能添加.png .jpg .jpeg文件）</div>
     </div> 

    <div v-show="picPath">
      <img :src="picPath" alt="" v-show="picPath">
      <div>
        <div class="title">图片识别的物品：</div>
        <div v-show="goodsList == 0">正在查询数据····</div>
        <div class="goods" v-show="goodsList!= 0">
          <div class="button">
            <div @click="show(index)" v-for="(item,index) in goodsList" :key="index">
              <div :class="index == showIndex ? 'active' :''" v-text="item.keyword"></div>
            </div>
          </div>

        </div>
        <ul v-show="goodsList != 0">
          查询到 "{{goodsList[showIndex] ? goodsList[showIndex].keyword :''}}" 的垃圾物品分类：
          <li v-for="(item,index) in dataList" :key="index" @click="popup(index)" v-show="dataList.length !=0">
            <span>{{item.name}}</span>
            <span>{{item.type | rubbish}}</span>
          </li>
          <li v-show="dataList.length == 0">未查询到数据</li>
        </ul>

      </div>
    </div>
    <mt-popup class="popup" v-model="popupVisible" position="middle">
      <div class="close" @click="close">X</div>
      <div class="solt" v-if="dataList[index]">
        <div>垃圾：<span>&emsp;&emsp;{{dataList[index].name}}</span></div>
        <div>种类：<span>&emsp;&emsp;{{dataList[index].type | rubbish}}</span></div>
        <div>描述：<span>&emsp;&emsp;{{dataList[index].explain}}</span></div>
        <div>提示：<span>&emsp;&emsp;{{dataList[index].tip}}</span></div>
        <div>其他：<span>&emsp;&emsp;{{dataList[index].contain}}</span></div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import { Button, Popup } from "mint-ui";
export default {
  data() {
    return {
      faceBase64: "",
      picPath: "",
      dataList: [],
      goodsList: [],
      showIndex: 0,
      index: 0,
      popupVisible: false
    };
  },
  watch: {
    picPath(val) {
      this.dataList = [];
      this.goodsList = [];
    }
  },
  filters: {
    rubbish: function(value) {
      let type;
      switch (value) {
        case 0:
          type = "可回收垃圾";
          break;
        case 1:
          type = "有害垃圾";
          break;
        case 2:
          type = "厨余垃圾";
          break;
        case 3:
          type = "其他垃圾";
          break;
      }
      return type;
    }
  },
  components: {
    Popup,
    Button
  },
  created() {},
  methods: {
    close() {
      this.popupVisible = false;
    },
    resize() {
      this.showIndex = 0;
      this.index = 0;
      this.$refs.input.click();
    },
    popup(index) {
      this.index = index;
      this.popupVisible = true;
    },
    show(index) {
      this.showIndex = index;
      this.dataList = "";
      this.change(this.goodsList[this.showIndex]);
    },
    shangc(e) {
      let files = document.getElementById("id").files[0];
      let name = document.getElementById("id").files[0].name;
      // this.picPath=document.getElementById("id").value
      let arr = name.split(".");
      let fileSize = 0;
      let fileMaxSize = 10240; //1M
      if (files) {
        fileSize = files.size;
        if (fileSize > 10 * 1024 * 1024) {
          alert("文件大小不能大于10M！");
          file.value = "";
          return false;
        } else if (fileSize <= 0) {
          alert("文件大小不能为0M！");
          file.value = "";
          return false;
        }
      } else {
        return false;
      }
      //转码base64
      let reader = new FileReader();
      let imgFile;
      // let that = this
      reader.readAsDataURL(files);
      reader.onload = async e => {
        imgFile = e.target.result;
        let arr = imgFile.split(",");
        this.faceBase64 = arr[1];
        this.picPath = "data:image/png;base64," + arr[1];
        const { data: data } = await this.$axios.post(
          "https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general",
          this.$qs.stringify({
            access_token:
              "24.270646bef6460266be38797a16acebf6.2592000.1579071838.282335-18035045",
            image: arr[1]
          })
        );
        this.goodsList = data.result;
        this.change(this.goodsList[0]);
      };
    },
    change(obj) {
      this.$axios
        .get(
          `http://api.tianapi.com/txapi/lajifenlei/index?key=ee4fe2fe33e09349c9174182acaf1743&word=` +
            obj.keyword
        )
        .then(res => {
          if (res.data.code == 200) {
            this.dataList = res.data.newslist;
          } else {
            this.dataList = [];
          }
        });
    }
  }
};
</script>

<style scoped lang="less">
@import "~styles/index.less";
@import "~styles/variable.less";
.content-box {
  padding-bottom: 180px;
  position: relative;
  // overflow: hidden;
}
.resize {
  position: absolute;
  top: 40px;
  right: 20px;
  // width: 0px;
  font-size: 30px;
  padding: 0 20px;
  touch-action: none;
}
.addPic{
  padding-top: 15%;
  display:flex;
  flex-direction: column;
  align-items: center;
}
.tips{
  width: 390px;
  height: 210px;
  margin: 0
}
.imgClass {
  margin-top: 15%;
  display: inline-block;
  width: 320px;
  height: 320px;
  background: #f9fbf9;
  border: 1px solid #d0ecd0;
  position: relative;
  input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
  span {
    line-height: 320px;
    color: #1aad19;
    font-size: 30px;
  }
}

img {
  margin-top: 10%;
  width: 320px;
  height: 320px;
}

ul {
  padding: 0 80px;
  text-align: left;
  margin-top: 30px;
  font-size: 30px;
  li {
    touch-action: none;
    padding: 0 40px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 26px;
    height: 80px;
    line-height: 80px;
    // text-align: justify;
    display: flex;
    justify-content: space-between;
    &:first-child {
      margin-top: 20px;
      border-top: 1px solid #e5e5e5;
    }
  }
}

.goods {
  margin: 40px;
  margin-top: 20px;

  text-align: left;
  background-color: #f5e1ce;
  border-radius: 20px;
  padding: 20px;

  .button {
    display: flex;
    // justify-content: space-between;
    flex-wrap: wrap;
    div {
      // min-width: 30%;
      height: 80px;
      display: flex;
      align-items: center;
      // margin: 0 10px;
      div {
        margin: 0 30px;
        height: 50px;
        width: auto;
        padding: 4px 20px;
        // margin-right: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        background-color: #fff;
        font-size: 26px;
      }
    }
  }
}
.active {
  color: #fff;
  background-color: #8aaaf0 !important;
}

.popup {
  width: 80%;
  border-radius: 20px;
  .close {
    height: 60px;
    width: 60px;
    line-height: 60px;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 36px;
    touch-action: none;
  }
  .solt {
    // padding: 40px 0;
    font-size: 30px;
    text-align: left;
    padding: 10px;
    div {
      display: flex;
      flex-direction: column;
      margin: 30px;
      color: #f75050;
      span {
        color: #333;
        margin-top: 20px;
        line-height: 40px;
      }
    }
  }
}
.title {
  padding-left: 30px;
  text-align: left;
  font-size: 30px;
}
</style>
